<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
    <title>burybell-storage</title>
</head>
<body>

<div class="container mt-5">
    <div class="row">
        <div class="col-md-3">

        </div>
        <div class="col-md-6">
            <h4 class="fw-bold pb-4 d-flex flex-row">标准上传</h4>
            <div class="mb-3">
                <div class="progress" id="progress-bar">
                    <div class="progress-bar" role="progressbar" id="progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
            <div class="mb-3">
                <label for="file" class="form-label"><i class="bi bi-file-earmark-plus-fill"></i> 文件</label>
                <input class="form-control" type="file" id="file" name="file">
            </div>
            <div class="mb-3">
                <label for="scene" class="form-label"><i class="bi bi-disc-fill"></i> 场景</label>
                <input class="form-control" list="datalistOptions" type="text" id="scene" name="scene">
                <datalist id="datalistOptions">
                    <option th:each="scene:${scenes}" th:value="${scene}">
                </datalist>
            </div>
            <input type="button" id="upload" class="btn btn-primary" value="上传">
        </div>

        <div class="col-md-3">

        </div>
    </div>
</div>
<script>
    $("#upload").click(function () {

        let scene = $("#scene").val()
        let progress = $("#progress")
        let progressBar = $("#progress-bar")
        progressBar.hide()
        let URL = "/common/upload/" + scene;
        let form = new FormData();
        form.append("file",$("#file").prop('files')[0]);
        if (form.get("file") === undefined) {
            layer.msg("文件不能为空");
        } else if (scene === '') {
            layer.msg("场景不能为空");
        } else {
            progressBar.show()
            $.ajax({
                type: 'POST',
                url: URL,
                data: form,
                cache: false,
                processData: false,
                contentType: false,
                xhr:function(){
                    var myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){
                        myXhr.upload.addEventListener('progress',function(e){
                            let loaded = e.loaded; //已经上传大小情况
                            let total = e.total; //附件总大小
                            let percent = Math.floor(100*loaded/total)+"%"; //已经上传的百分比
                            progress.css("width",percent)
                        }, false);
                    }
                    return myXhr;
                },
                success: function (ret) {
                    let data = ret['data']
                    progressBar.hide()
                    confirm = layer.confirm('显示信息？', {
                        btn: ['查看信息','不了'] //按钮
                    }, function(){
                        layer.close(confirm)
                        $("#sid").text(data['sid'])
                        $("#definition").text(data['definition'])
                        $("#size").text(data['size'])
                        $("#sceneName").text(data['scene'])
                        $("#open").attr("href","/view/"+data['scene']+"/"+data['year']+"/"+data['month']+"/"+data['day']+"/"+data['sid'])
                        $("#download").attr("href","/download/"+data['scene']+"/"+data['year']+"/"+data['month']+"/"+data['day']+"/"+data['sid'])
                        let massage = $("#massage")
                        layer.open({
                            type: 1,
                            area: ['600px','400px'],
                            content: massage,
                            cancel: function(index, layero){
                                massage.css("display","none")
                                return true;
                            },
                            success: function(layero, index){
                                massage.css("display","block")
                            }
                        });
                    }, function(){
                        layer.msg("上传成功😀")
                    });
                }
            })
        }
    })
</script>
<div id="massage" style="display: none">
    <table class="table table-hover">
        <thead>
            <tr>
                <th scope="col">名称</th>
                <th scope="col">值</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">文件ID</th>
                <td id="sid" class="fw-light"></td>
            </tr>
            <tr>
                <th scope="row">文件名称</th>
                <td id="definition" class="fw-light"></td>
            </tr>
            <tr>
                <th scope="row">文件大小</th>
                <td id="size" class="fw-light"></td>
            </tr>
            <tr>
                <th scope="row">文件场景</th>
                <td id="sceneName" class="fw-light"></td>
            </tr>
            <tr>
                <th scope="row">文件操作</th>
                <td>
                    <a href="#" class="link-success" target="_blank" id="open">点击预览</a>
                    <a href="#" class="link-warning" target="_blank" id="download">点击下载</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>